<template>
  <PageContainer>
    <view class="container">
      <Header title="数据操作记录" />

      <Paglist
        v-model="dataList"
        :is-init-api="false"
        :parame="parame"
        @register="register"
        :is-show-loadmore="dataList.length > 1"
      >
        <template v-for="item in dataList" :key="item.id">
          <view class="bgf br-8 pa-16 ma-16">
            <view class="disFlxJS">
              <view class="disFlxAC">
                <view class="fz-16">
                  {{ item.taskType === ServiceFormExportTypeEnum.EXPORT ? '导出' : '导入' }}数据
                </view>
                <view
                  class="fz-12 px-8 py-2 br-2 ml-10"
                  :style="{
                    color: statusInfo(item.exportStatus)?.color,
                    background: statusInfo(item.exportStatus)?.bgColor,
                  }"
                >
                  {{ statusInfo(item.exportStatus)?.text }}
                </view>
              </view>
              <view
                v-if="item.exportTaskFileList && item.exportTaskFileList.length"
                class="dwBtn fz-12"
                @click="handleClick(item)"
              >
                下载
              </view>
            </view>
            <view class="exCard_name fz-14 ov-1 my-8">
              {{ item.taskName }}
            </view>
            <view class="exCard_time fz-12" style="color: #969799">{{ item.createTime }}</view>
          </view>
        </template>
      </Paglist>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* exportRecord 数据操作记录 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import { provide, reactive, ref, watch } from 'vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { navigateTo, onLoad } from '@/router';
  import { getExportFormList } from '@/api/serviceForm';
  import type { ServiceFormExportDetail } from '@/api/serviceForm/types';
  import { ServiceFormExportTypeEnum, ServiceFormExportStatusEnum } from '@/enums/serviceFormEnum';
  import { useAdminStoreWithOut } from '@/store/modules/admin';
  import { storeToRefs } from 'pinia';
  import { differenceBy } from 'lodash-es';
  import { onPageScroll } from '@dcloudio/uni-app';

  const [register, { refresh }] = useConList();

  provide('api', (obj: any) => {
    return getExportFormList(obj);
  });
  const parame = reactive({});
  const dataList = ref<ServiceFormExportDetail[]>([]);

  onLoad(() => {
    // 清除任务队列已完成任务
    refresh && refresh();
  });

  const statusInfo = (status: ServiceFormExportStatusEnum) => {
    switch (status) {
      case ServiceFormExportStatusEnum.CREATED || ServiceFormExportStatusEnum.PROCESSING:
        return {
          text: '导出中',
          color: '#2878FF',
          bgColor: '#D0F7FF',
        };
      case ServiceFormExportStatusEnum.FINISHED:
        return {
          text: '已完成',
          color: '#FFFFFF',
          bgColor: '#2878FF',
        };
      case ServiceFormExportStatusEnum.TASK_FAIL:
        return {
          text: '失败',
          color: '#FFFFFF',
          bgColor: '#EA5E0E',
        };
    }
  };

  function handleClick(item: ServiceFormExportDetail) {
    if (item.exportTaskFileList) {
      navigateTo({
        name: 'exportDetail',
        options: {
          urls: item.exportTaskFileList.map((v) => v.fileUrl),
        },
      });
    }
  }

  // 任务队列中数据更新时,更新列表
  const useAdmin = useAdminStoreWithOut();
  const { taskQueuesList } = storeToRefs(useAdmin);
  watch(
    () => taskQueuesList.value,
    (nval) => {
      // 已完成任务
      const _finishedList = nval.filter(
        (v) =>
          v.exportStatus !== ServiceFormExportStatusEnum.CREATED &&
          v.exportStatus !== ServiceFormExportStatusEnum.PROCESSING,
      );
      if (_finishedList.length) {
        dataList.value.forEach((item) => {
          // 匹配当前列表是否和队列中是否有相同任务, 有并且已完成时更新列表
          const v = _finishedList.find((v) => v.taskId === item.taskId);
          if (v) {
            item.exportStatus = v.exportStatus;
            item.exportTaskFileList = v.exportTaskFileList;
          }
        });
        useAdmin.setTaskQueuesList(differenceBy(nval, _finishedList, 'taskId')); // 删除已完成任务
      }
    },
    { immediate: true, deep: true },
  );

  onPageScroll(() => {});
</script>

<style lang="scss" scoped>
  .dwBtn {
    color: #2878ff;
    border: solid 1px #2878ff;
    border-radius: 24rpx;
    padding: 8rpx 24rpx;
  }
</style>
